<template>
		<view>
			<view class="mp-header">
				<view class="sys-head" :style="{ height: statusBarHeight }"></view>
				<view class="serch-box"  style="height: 43px;">
					<view class="serch-wrapper acea-row row-middle">
						<view class="logo">
							<image src="https://yi.qj361.com/20210818221240_logo3.png" mode=""></image>
						</view>
						<view class="title"><text>骑境驿站</text></view>
						<navigator @click="goGoodSearch()" class="input acea-row row-middle row-center"  hover-class="none">
							<image src="https://yi.qj361.com/20210818221246_serch.png" mode=""></image>
						</navigator>
						<view class="qr" @click="startQr()">
							<image src="https://yi.qj361.com/20210818221509_qr.png" />
						</view>
					</view>
				</view>
			</view>
			<view :style="'margin-top:'+marTop+'px;'"></view>
		</view>
</template>

<script>
	
	import {handleUrlParam} from "@/utils/index";

		
	
		let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
		export default {
			name: 'HeaderSerch',
			props: {
				dataConfig: {
					type: Object,
					default: () => {}
				},
				isTransparent: {
					type: Boolean,
					default: true
				}
			},
			data() {
				return {
					statusBarHeight: statusBarHeight,
					logoConfig: '',
					mbConfig: 0,
					marTop:0,
					// hotWords: this.dataConfig.hotWords.list
				};
			},
			mounted(){
				let that = this;
				// uni.setStorageSync('hotList',that.hotWords);
				// that.$store.commit('hotWords/setHotWord', that.hotWords);
				// #ifdef MP || APP-PLUS
				this.$nextTick(function(){
					// 获取小程序头部高度
					let info = uni.createSelectorQuery().in(this).select(".mp-header");
					console.log("头部信息"+info);
					info.boundingClientRect(function(data) {
						// console.log("头部信息1"+data);
						that.marTop = data.height
						console.log(data.height);
					}).exec()
				})
				// #endif
			},
			watch: {
				isTransparent(val) {
					console.log(val);
					this.isTransparent = val
					console.log(this.isTransparent);
				}
			},
			methods: {
				goGoodSearch() {
					// this.$yrouter.push('/pages/shop/GoodsEvaluate/index');
					this.$yrouter.push("/pages/shop/GoodSearch/index");
				},
				startQr: function(){
					uni.scanCode({
						success: (res) => {
							console.log("二维码");
							console.log(res);
							console.log(res.result[0]);
							let option = handleUrlParam(res.result);
							console.log(option);
							switch (option.pageType) {
								case "sqdl":
									// 跳转商品详情
									this.$yrouter.push({
										path: "/pages/HzPages/sqdlView/sqdlView",
								 		query: {
											 pid:option.pid
											// 20210819之前的是下面的传的
											// q:res.result
										},
									}); 
									break;
								case "good":
									// 跳转商品详情
									this.$yrouter.push({
										path: "/pages/shop/GoodsCon/index",
										query: {
											q: res.result,
										},
									});
									break;
								case "group":
									// 跳转团购
									this.$yrouter.push({
										path: "/pages/activity/GroupRule/index",
										query: {
											q: res.result,
										},
									});
									break;
								case "dargain":
									// 跳转砍价
									this.$yrouter.push({
										path: "/pages/activity/DargainDetails/index",
										query: {
											q: res.result,
										},
									});
									break;
								default:
									// 跳转分销
									this.$yrouter.push({
										path: "/pages/Loading/index",
										query: {},
									});
									break;
							}
						},
					});
				}
			}
		}
</script>

<style lang="scss">
		/* #ifdef MP || APP-PLUS */
		.mp-header {
			// width: 100%;
			// height: 176rpx;
			z-index: 30;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			background-image: url('https://yi.qj361.com/20210917111317_title_bar_bg.png');
			background-size: cover;
			// background-position: center;
			background-position: center bottom;
		 
			.serch-wrapper {
				display: flex;
				align-items: center;
				height: 100%;
				padding: 0 12rpx 0 31rpx;
				
				.logo {
					width: 34rpx;
					height: 37rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.title{
					font-size: 31rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 43rpx;
					opacity: 0.8;
					margin: 0 20rpx 0 11rpx;
				}
		
				.input {
					/* #ifdef MP */
					width: 270rpx;
					/* #endif */
					/* #ifdef APP-PLUS */
					flex: 1;
					/* #endif */
					height: 50rpx;
					image{
						width:100%;
						height:100%;
					}
					// padding: 0 0 0 30rpx;
					// background: rgba(247, 247, 247, 1);
					// border: 1px solid rgba(241, 241, 241, 1);
					// color: #BBBBBB;
					// font-size: 28rpx;
		
					// .iconfont {
					// 	margin-right: 20rpx;
					// }
					// 没有logo，直接搜索框
					&.on{
						/* #ifdef MP */
						width: 70%;
						/* #endif */
						/* #ifdef APP-PLUS */
						width: 100%;
						/* #endif */
					}
					// 设置圆角
					// &.fillet{
					// 	border-radius: 29rpx;
					// }
					// 文本框文字居中
					// &.row-center{
					// 	padding: 0;
					// }
				}
			}
			.qr {
				width: 32rpx;
				height: 32rpx;
				margin-left: 16rpx;
				display: flex;
			}
			.qr image {
				width: 100%;
				height: 100%;
			}
			.serch-box {
				display: flex;
				align-items: center;
			} 
		}
		.no-transparent {
			background-color: #02335E;
		}
		.is-transparent {
			background-color: transparent ;
		}
		@media only screen and (max-device-width : 350px){
		    .mp-header .qr {
				margin-left: 7rpx;
			}

		    /* style */
		}
		/* #endif */
</style>
